<!--
  @confirm 确认时将选择的values传出
-->
<template>
  <mt-popup
    class="xgd-popup"
    v-model="visible"
    position="bottom">
    <div class="clearfix xgd-popup__btn">
      <span class="pull-left" @click="visible=false">取消</span>
      <span class="pull-right" @click="confirmValue">确认</span>
    </div>
    <mt-picker
      :class="'picker--'+type"
      :itemHeight="itemHeight"
      :slots="fSlots"
      @change="onValuesChange"
      :visible-item-count="itemCount"
      ref="picker"
      :valueKey="fValueKey">
    </mt-picker>
  </mt-popup>
</template>
<script>
  export default {
    props: {
      slots: {
        type: Array,
        default: () => {
          return []
        }
      },
      value: Boolean,
      values: Array,
      type: {
        type: String,
        default: 'single'
      },
      valueKey: {
        type: String,
        default: ''
      },
      itemHeight: {
        type: Number,
        default: 60
      },
      itemCount: {
        type: Number,
        default: 3
      }
    },
    data() {
      return {
        visible: this.value,
        result: [],
        timer: null,
        oldResult: [],
        addressSlots: [
          {
            flex: 1,
            values: [],
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: [],
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: [],
            textAlign: 'center'
          }
        ]
      }
    },
    computed: {
      fSlots() {
        if (this.type == 'address') {
          return this.addressSlots
        } else {
          return this.slots
        }
      },
      fValueKey() {
        if (this.type == 'address') {
          return 'name'
        } else {
          return this.valueKey
        }
      }
    },
    watch: {
      value(v) {
        this.visible = v
      },
      visible(v) {
        this.$emit('input', v)
      },
      result(v) {
        if (this.type === 'address' && v[0] !== undefined) {
          if (v[0] !== this.oldResult[0]) {
            this.getArea(v[0].code).then((data) => {
              this.$refs.picker.setSlotValues(1, data.data)
            })
          } else if (v[1] !== this.oldResult[1]) {
            this.getArea(v[1].code).then((data) => {
              this.$refs.picker.setSlotValues(2, data.data)
            })
          }
          this.oldResult = this.$util.copyArray(v)
        }
      }
    },
    methods: {
      onValuesChange(picker, values) {
        this.result = values
      },
      confirmValue() {
        this.visible = false
        this.$emit('update:values', this.$util.copyArray(this.result))
      },
      getArea(code = null) {
        let params = {}
        if( code!==null){
          params.code = code
        }
        return this.$util.createPromise('getArea', params)
      }
    },
    mounted() {
      let defaultIndex = this.fSlots[0].defaultIndex
      defaultIndex = defaultIndex ? defaultIndex : 0
      this.$refs.picker.setSlotValue(0, undefined)
      this.$nextTick(() => {
        this.$refs.picker.setSlotValue(0, this.fSlots[0].values[defaultIndex])
      })
      if (this.type === 'address') {
        this.getArea().then((data) => {
          this.addressSlots[0].values = data.data
        })
      }
    }
  }
</script>